<template>
  <!-- 服务设置 -->
  <div class="tablePageWarp">
    <div class="table-page-search-wrapper commonSelectWidth">
      <a-form>
        <a-row :gutter="16">
          <a-col>
            <a-form-item :colon="false">
              <a-select
                v-model="queryParam.softwareCode"
                showSearch
                allow-clear
                optionFilterProp="children"
                :filterOption="$commonFun.filterOption"
                :placeholder="$t('pleaseSelect') + $t('lingjian')"
              >
                <a-select-option
                  v-for="(item, index) in ecuList"
                  :key="index"
                  :value="item.softwareCode"
                  :title="item.name"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <s-table
      ref="table"
      class="h100 withMinHeightTbodyBox"
      :rowKey="(record, index) => record.id"
      :columns="columns"
      :data="loadData"
    >
      <template
        slot-scope="text"
        v-for="column in columns.filter((item) => !item.special)"
        :slot="column.scopedSlots.customRender"
      >
        <table-ellipsis :text="text" :key="column.dataIndex"></table-ellipsis>
      </template>
    </s-table>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { STable } from '@/components'
import { templateColumns } from '../configConst'

export default {
  name: 'ServiceTemplatePage',
  components: {
    TableEllipsis,
    STable
  },
  data () {
    return {
      queryParam: {},
      columns: templateColumns
    }
  },
  computed: {
    ...mapState({
      instantUpdateTime: (state) => state.app.instantUpdateTime
    })
  },
  created () {
    this.filterItem() // 筛选条件
  },
  watch: {
    instantUpdateTime: {
      handler () {
        const vm = this
        vm.filterItem()
      },
      immediate: true
    }
  },
  mounted () {},
  methods: {
    // 筛选条件
    filterItem () {
      const vm = this
      vm.$api.getAllEcu().then((response) => {
        vm.ecuList = []
        vm.ecuList = response.data
      })
    },
    loadData (parameter) {
      const vm = this
      // 如果是全部则不传值给后端
      const JnqueryParam = JSON.parse(JSON.stringify(vm.queryParam))
      // eslint-disable-next-line no-restricted-syntax
      for (const key in JnqueryParam) {
        if (JnqueryParam[key] === '') {
          JnqueryParam[key] = undefined
        }
      }
      return vm.$api.getVersionList({ ...parameter, ...JnqueryParam })
    },
    refreshData (isToFirstPage = true) {
      let obj = null
      if (isToFirstPage) {
        obj = { current: 1 }
      }
      this.$refs.table.loadData(obj)
    }
  }
}
</script>
